<script setup>
import {ref, getCurrentInstance, onMounted, reactive,nextTick} from "vue";
import {ElMessage,ElMessageBox} from 'element-plus'
const handleClick = () => {
  console.log('click')
}

const tableData = ref([])
const {proxy} = getCurrentInstance();
const getUserData = async () => {
  let data = await proxy.$api.getUserData(config)
  tableData.value = data.list.map(item=>({
    ...item,
    sexLabel : item.sex === '1' ? '男' : '女'
  }))
  config.total = data.count
  // console.log(data)
}

const tableLabel = reactive([
  {
    prop:'name',
    label:'姓名'
  },
  {
    prop:'age',
    label:'年龄'
  },
  {
    prop:'sexLabel',
    label:'性别'
  },
  {
    prop:'birth',
    label:'出生日期',
    width:200
  },
  {
    prop:'addr',
    label:'地址',
    width:400
  }
])

const formInline = reactive({
  keyWord:''
})
const config = reactive({
  name: '' ,
  total:0,
  page:1
})
const handleSearch = ()=>{
  config.name = formInline.keyWord
  // console.log(formInline.keyWord)
  // console.log(config.name)
  getUserData()
}
const handleChange = (page)=>{
  config.page = page;
  getUserData()
}
const handleDelete=(val)=>{
  ElMessageBox.confirm("你确定要删除吗?").then(async ()=>{
    await proxy.$api.deleteUser({id: val.id})
    ElMessage({
      showClose:true,
      message:"删除成功",
      type:"success",
    })
    await getUserData()
  })
}

const action = ref('add')
const dialogVisible = ref(true)
const formUser = reactive({
  sex:'1'
})
const rules = reactive({
  name:[{ required:true,message:"姓名是必须填", trigger:"blur"}],
  age:[
    { required:true,message:"年龄是必填项", trigger:"blur"},
    { type: "data" , message: "年龄必须是数字"},
  ],
  sex:[{ required:true, message:"性别是必选项", trigger:"change"}],
  birth:[{ required:true, message:"出生日期是必选项"}],
  addr:[{ required:true, message:"地址是必填项"}],
})
const handleClose = ()=>{
  //获取表单并重置
  dialogVisible.value = false

}
const handleCancel = ()=>{
  dialogVisible.value = false
}
const handleAdd=()=>{
  dialogVisible.value = true
  action.value = 'add'
}

const timeFormat = (time)=>{
  var time = new Date(time)
  var year = time.getFullYear()
  var month = time.getMonth() + 1
  var day = time.getDate()
  function add(m){
    return m<10 ? "0"+m : m
  }
  return year+"-"+add(month)+"-"+add(day)
}

const onSubmit = ()=>{
  //先要验证
  proxy.$refs['userForm'].validate(async (valid) => {
    if (valid) {
      let res = null
      formUser.birth = /^\d{4}-\d{2}$/.test(formUser.birth) ? formUser.birth :
      timeFormat(formUser.birth)
      if(action.value === 'add'){
        res = await proxy.$api.addUser(formUser)
      }else {
        res = await proxy.$api.editUser(formUser)
      }
      if(res){
        dialogVisible.value = false
        proxy.$refs['userForm'].resetFields()
        getUserData()
      }
    }else {
      ElMessage({
        showClose:true,
        message:"请输入正确的内容",
        type:'error'
      })
    }
  })
}

const handleEdit = (val)=>{
  action.value = 'edit'
  dialogVisible.value = true
  nextTick(()=>{
    Object.assign(formUser,{...val,sex:''+val.sex})
  })
}


onMounted(() => {
  getUserData()
})
</script>

<template>
  <div class="user-header">
    <el-button type="primary" @click="handleAdd">新增</el-button>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="请输入">
        <el-input placeholder="请输入用户名" v-model="formInline.keyWord"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in tableLabel"
      :key="item.prop"
      :width="item.width ? item.width: 125"
      :prop="item.prop"
      :label="item.label"
    />

    <el-table-column fixed="right" label="选项" min-width="120">
      <template #="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <el-pagination
        class="pager"
        background
        layout="prev, pager, next"
        size="small"
        :total="config.total"
        @current-change = "handleChange"
    />
  </div>
   <el-dialog
    v-model = "dialogVisible"
    :title="action == 'add' ? '新增用户' : '编辑用户'"
    width="35%"
    :before-close="handleClose"
  >
    <el-form :inline="true" :model="formUser" :rules="rules" ref="userForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formUser.name" placeholder="请输入姓名"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formUser.age" placeholder="请输入年龄"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item class="select-clearn" label="性别" prop="sex">
            <el-select class="mc-select" v-model="formUser.sex" placeholder="请选择">
              <el-option label="男" value="1" />
              <el-option label="女" value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              v-model="formUser.birth"
              type="date"
              placeholder="请输入"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          label="地址"
          prop="addr"
        >
          <el-input v-model="formUser.addr" placeholder="请输入地址"/>
        </el-form-item>
      </el-row>
      <el-row style="justify-content: flex-end">
        <el-form-item>
          <el-button type="primary" @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="less">
.user-header{
  display: flex;
  justify-content: space-between;
}
.table{
  position: relative;
  height: 520px;
  .pager{
    position: absolute;
    right: 10px;
    bottom:30px;
  }
  .el-table{
    width: 100%;
    height: 500px;
  }
}
.mc-select{
  width: 200px;
}
.select-clearn{
  display: flex;
}
</style>